<template>
  <div class="app-container">

<!--    spu:{{ spu }}
    <br>
    sku:{{ skuList }}-->

    <!-- SPU -->
    <spu ref="spu" v-loading="uploadLoading"></spu>

    <div v-if="disabled" >
      <el-divider content-position="left">sku</el-divider>

      <el-card>
        <el-link :underline="false" style="font-size: 20px">下方开始添加sku信息（商品变种规格）</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link :underline="false" style="font-size: 20px">产品sku总数:{{ count }}</el-link>
        <el-divider direction="vertical"></el-divider>
        {{ skuList }}
      </el-card>
      <!-- SKU -->
      <div style=""  v-for="index in count" v-loading="uploadLoading">
        <sku :index="index" ref="skuList"></sku>
      </div>

      <el-card style="text-align: center"
               shadow="hover"
               v-loading="uploadLoading"
               element-loading-text="拼命上传中">
        <el-button @click="upload"
                   type="primary">
          上传<i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <el-button @click="resetForm" type="danger">重置</el-button>
        <el-progress :percentage="progressPercent" style="width: 50vw;margin: 20px auto 0 auto" :color="customColors"></el-progress>
      </el-card>

    </div>

  </div>
</template>

<script>
  import { uploadProduct } from '@/api/product'
  import upload from '@/views/product/add/spu/upload'
  import sku from '@/views/product/add/sku/sku'
  import spu from '@/views/product/add/spu/spu'
  import {mapGetters} from 'vuex'

  export default {
    name: "ProductAdd",
    components: { upload, spu, sku },
    data() {
      return {
        uploadLoading: false,
        progressPercent: 0,
        customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
        //spu: this.$store.getters.spu,
        //count: 1,
      };
    },
    methods: {
      updateProgress(e) {
        // progressEvent.loaded:已上传文件大小，progressEvent.total:被上传文件的总大小
        this.progressPercent = parseInt((e.loaded / e.total) * 100);
      },
      upload(){
        console.log("spuFlag =",this.disabled,"skuFlag =",Object.values(this.skuDisabledList))

        if (this.disabled && !Object.values(this.skuDisabledList).includes(false)){
          // 开始上传
          this.uploadLoading = true;
          this.$store.commit('product/clear_allInfo_skuList')// 清空vuex中的allInfo，防止重复资源上传

          let skuList = {key: "skuJson",value: JSON.stringify(this.skuList)}
          this.$store.commit('product/SET_ALL_INFO', skuList)// 将spu信息加入vuex

          uploadProduct(this.allInfo,this.updateProgress).then(response => {
            console.log(response)
            if (response.state === true) {
              this.uploadLoading = false;
              this.resetForm();
              this.$notify.success({title: '成功',message: response.message});
            } else {
              this.uploadLoading = false;
              this.$notify.warning({ title: '失败', message: response.message, duration: 1500 });
            }
          }).catch((error) => {
            this.uploadLoading = false;
            this.$notify.error({ title: '错误', message: response.message, duration: 1500 });
          })
        }else {
          this.$notify.warning({ title: '失败', message: "信息还未填写完成", duration: 1500 });
        }
      },
      resetForm() {
        this.$store.commit('product/reset')// 重置
/*        console.log(this.$refs.spu)
        console.log(this.$refs.spu.$refs.mainImgUpload)
        console.log(this.$refs.spu.$refs.subImgUpload)*/
        this.$refs.spu.$refs.mainImgUpload.resetForm()
        this.$refs.spu.$refs.subImgUpload.resetForm()
        this.progressPercent = 0;
      },
    },
    computed:{
      //使用mapState自动生成计算属性
      //...mapState({sum:'sum',school:'school',subject:'subject'}),//对象写法
      ...mapGetters(['spu','disabled','skuList','skuDisabledList','allInfo']),//数组写法
      count(){
        if (this.disabled){
          let count = 1;
          this.spu.attributeList.forEach((item, index)=>{
            console.log(item.value)
            count *= item.value.length
          })
          // 初始化sku锁定信息
          this.$store.commit('product/INIT_SKU_DISABLED_LIST', count)
/*
          console.log("productAdd 初始化sku锁定信息",this.skuDisabledList)
*/
          return count
        }
      },
    },
    watch: {
    },
    filters: {
    },
    beforeMount(){//初始化数据
    },
    mounted(){
    },
  }
</script>

<style scoped>

  .clearfix{
    display: flex;
    align-items: center;
  }
  .text {
    font-size: 14px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

</style>
